.m-item {
	display: flex;
	height: 5.25em;
	padding: 0em 1em;
	cursor: pointer;
	justify-content: space-between;
	align-content: center;
	touch-action: auto;
	line-height: 1.5;
	@media screen and (min-width: 720px) {
		display: grid;
		flex: none;
		align-content: center;
		grid-template-areas: "left middle right";
		grid-template-columns: 2.25em calc(100% - 4.8em) 2.45em;
	}
	@supports (content-visibility: auto) {
		content-visibility: auto;
	}
}
.isPlaying {
	background: scale-color(#57575831, $lightness: 35%);
}

.index {
	display: none;
	visibility: none;
	@media screen and (min-width: 720px) {
		width: 1.5em;
		font-weight: 600;
		grid-area: left;
		text-align: center;
		pointer-events: none;
		opacity: 1;
		white-space: nowrap;
		/* margin-right: 1rem; */
		place-self: center;
		display: grid;
		justify-items: center;
		visibility: visible;
	}
}
.title {
	font-weight: 400;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: block;
	max-width: calc(100%);
	@media screen and (min-width: 720px) {
		max-width: calc(100% - 0.2em);
	}
}

.metadata {
	display: flex;
	align-self: center;
	/* padding-right: 1.8rem; */
	grid-area: middle;
	flex-direction: row;

	gap: 0.875em;

	align-items: center;
	width: 100%;
	max-width: calc(100% - 3em);
}
.column {
	display: flex;
	flex-direction: column;
	justify-content: center;

	width: 100%;
	max-width: calc(100% - 4.45em);
}

.artists {
	font-family: "CommissionerVariable", sans-serif;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
	> a,
	span {
		color: rgb(212, 212, 212);
	}
}

.length {
	align-self: center;
	grid-area: right;
	width: 2.45em;
}

.thumbnail {
	min-width: 4.25em;
	max-width: 4.25em;
	aspect-ratio: 1/1;
	min-height: 4.25em;
	/* margin-right: 1rem; */
	max-height: 4.25em;

	border-radius: var(--xs-radius);
	@media screen and (min-width: 720px) {
		margin-left: 1em;
	}
}
img {
	width: 100%;
	height: 100%;
	border-radius: var(--xs-radius);

	position: relative;

	aspect-ratio: 1/1;
	object-fit: contain;
}
img::before {
	display: block;
	content: "";
	padding-top: calc(100% * 2 / 3);
	/* You could reduce this expression with a preprocessor or by doing the math. I've kept the longer form in `calc()` to make the math more readable for this demo. */
}
